<template>
    <div class="app-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>多维度环比分析</span>
            </div>
            <div class="query-layout">
                <el-date-picker v-model="time" type="date"  placeholder="选择日期"></el-date-picker>
                <el-button class="btn" type="primary">查询</el-button>
            </div>
            <div class="content">
                <el-row :gutter="30">
                    <el-col :span="6">
                        <div ref="chartRef1" class="grid-content"></div>
                    </el-col>
                    <el-col :span="6"><div ref="chartRef2" class="grid-content"></div></el-col>
                    <el-col :span="6"><div ref="chartRef3" class="grid-content"></div></el-col>
                    <el-col :span="6"><div ref="chartRef4" class="grid-content"></div></el-col>
                </el-row>
            </div>
        </el-card>

        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>详细数据分析</span>
            </div>
            <div class="query-layout">
                <el-date-picker v-model="time" type="date"  placeholder="选择日期"></el-date-picker>
                <el-button class="btn" type="primary">查询</el-button>
            </div>
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column prop="type" label="识别类型" align="center"></el-table-column>
                <el-table-column prop="area" label="发生区域" align="center"></el-table-column>
                <el-table-column prop="aiReport" label="AI上报数" align="center"></el-table-column>
                <el-table-column prop="aiAudit" label="AI审核通过数" align="center"></el-table-column>
                <el-table-column prop="aiWrong" label="AI误报数" align="center"></el-table-column>
                <el-table-column prop="aiRight" label="AI上报正确率" align="center" :formatter="e => e.aiRight+'%'"></el-table-column>
                <el-table-column prop="handleRate" label="问题处置率" align="center" :formatter="e => e.handleRate+'%'"></el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
<script>
import * as echarts from 'echarts';

function getOptions1(data) {
    const option = {
        title: {
            text: '问题类型占比',
            left: 'left'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            right: '3%',
            top: 'center',
            itemGap: 20
        },
        
        series: [
            {
            name: '问题类型占比',
            type: 'pie',
            radius: '50%',
            left: '-20%',
            label: {
                show: false,
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 144, name: '市容环境' },
                { value: 430, name: '宣传广告' },
                { value: 853, name: '施工管理' },
                { value: 228, name: '突发事件' },
                { value: 274, name: '街面秩序' }
            ],
            emphasis: {
                itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
            }
        ]
    };
    return option;
}

function getOptions2(data) {
    const option = {
        title: {
            text: '问题发生区域分析',
            left: 'left'
        },
        tooltip: {
            trigger: 'item'
        },
        xAxis: {
            type: 'category',
            data: ['区域1', '区域2', '区域3', '区域4', '区域5', '区域6', '区域7']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }
        ]
    };
    return option;
}

function getOptions3(data) {
    const option = {
        title: {
            text: '问题上报时间段分析'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: ['08:00-10:00', '10:00-12:00', '12:00-16:00', '16:00-20:00']
        },
        series: [
            {
                name: '',
                type: 'bar',
                barWidth: '40%',
                data: [500, 350, 230, 150]
            },
        ]
    };
    return option;
}

function getOptions4(data) {
    const option = {
        title: {
            text: '问题环比增长率(%)'
        },
        tooltip: {
            trigger: 'item',
            formatter:'{b}：     {c}%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: {
            type: 'value',
            
        },
        series: [
            {
                data: [18, 6, 20, 16, 82, 96],
                type: 'line',
                areaStyle: {
                    color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#018f40bf' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#409effbf' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                    }
                }
            }
        ]
    };
    return option;
}

export default {
    data() {
        return {
            time: '',
            myChart1: null,
            myChart2: null,
            myChart3: null,
            myChart4: null,
            tableData: [
                {type: '市容环境',area: '西湖区', aiReport: 10, aiAudit: 10,aiWrong:0, aiRight:100, handleRate:100},
                {type: '宣传广告',area: '拱墅区', aiReport: 8, aiAudit: 8,aiWrong: 0, aiRight :100, handleRate:100},
                {type: '施工管理',area: '余杭区', aiReport: 6, aiAudit: 6,aiWrong: 0, aiRight :100, handleRate:100},
                {type: '突发事任',area: '上城区', aiReport: 5, aiAudit: 5,aiWrong: 0, aiRight :100, handleRate:100},
                {type: '街面秩序',area: '临平区', aiReport: 2, aiAudit: 2,aiWrong: 0, aiRight :100, handleRate:100},
            ]
        }
    },
    mounted() {
        this.$nextTick(()=>{
            this.init()
        })
    },
    methods: {
        init() {
            this.initChart1()
            this.initChart2()
            this.initChart3()
            this.initChart4()
        },
        initChart1() {
            if(!this.myChart1) {
                this.myChart1 = echarts.init(this.$refs['chartRef1']);
            }
            const options = getOptions1()
            this.myChart1.setOption(options);
        },
        initChart2() {
            if(!this.myChart2) {
                this.myChart2 = echarts.init(this.$refs['chartRef2']);
            }
            const options = getOptions2()
            this.myChart2.setOption(options);
        },
        initChart3() {
            if(!this.myChart3) {
                this.myChart3 = echarts.init(this.$refs['chartRef3']);
            }
            const options = getOptions3()
            this.myChart3.setOption(options);
        },
        initChart4() {
            if(!this.myChart4) {
                this.myChart4 = echarts.init(this.$refs['chartRef4']);
            }
            const options = getOptions4()
            this.myChart4.setOption(options);
        },
    }
}
</script>
<style lang="scss" scoped>
.query-layout {
    margin-left: 20px;
    margin-bottom: 20px;
    .btn {
        margin-left: 10px;
    }
}
.content {
    .grid-content {
        height: 300px;
        // background: red;
    }
}
.box-card {
    margin-bottom: 20px;
}


</style>